<template>
  <div class="footer-guide">
    <span class="guide-item"
          :class="{on:$route.path==='/msite'}"
          @click="goto('/msite')">
      <span>
        <i class="iconfont icon-icon-waimai"></i>
      </span>
      <span>首页</span>
    </span>
    <span class="guide-item"
          :class="{on:$route.path==='/search'}"
          @click="goto('/search')">
      <span>
        <i class="iconfont icon-SearchIconCopyx"></i>
      </span>
      <span>搜索</span>
    </span>
    <span class="guide-item"
          :class="{on:$route.path==='/order'}"
          @click="goto('/order')">
      <span>
        <i class="iconfont icon-icon-dingdan"></i>
      </span>
      <span>订单</span>
    </span>
    <span class="guide-item"
          :class="{on:$route.path==='/profile'}"
          @click="goto('/profile')">
      <span>
        <i class="iconfont icon-icon-geren"></i>
      </span>
      <span>我的</span>
    </span>
  </div>
</template>
<script>
export default {
  name: 'FooterGuide',
  methods: {
    goto (path) {
      this.$router.replace(path)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/mixins.styl'
.footer-guide
  top-border-1px(#ccc)
  position fixed
  left 0
  bottom 0
  height 50.000025px
  width 100%
  display flex
  .guide-item
    width 25%
    display flex
    flex-direction column
    text-align center
    &.on
      color $green
    span
      margin-top 0.04rem
      font-size 0.16rem
      i
        font-size 22px
</style>